<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link rel="stylesheet" media="screen" href="css/docs.css"/>
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css"/>
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>


<script type="text/javascript">
    $(document).ready(function() {
        //initChat("monthly", "2012年9月", "-1");
    });

    function getPeriodTypName(periodEnum){
        var periodTypeName = "";
        if(periodEnum == "monthly"){
            periodTypeName = "月度";
        }else if(periodEnum == "bimonthly"){
            periodTypeName = "双月"
        }else if(periodEnum == "season"){
            periodTypeName = "季度"
        }else if(periodEnum == "semiyearly"){
            periodTypeName = "半年"
        }else if(periodEnum == "annually"){
            periodTypeName = "一年"
        }
        return periodTypeName;
    }

    //api
    function setChatDatas(finish_total, un_finish_total,periodEnum){
        var periodTypeName = getPeriodTypName(periodEnum);
        //alert(finish_total+":"+un_finish_total+":"+periodEnum)
        initLeftChat([["完成", parseInt(finish_total)],["未完成", parseInt(un_finish_total)]]);
        initRightChat([parseInt(finish_total)], [parseInt(un_finish_total)], [periodTypeName]);
    }

    function initLeftChat(total){
        $("#chart5").html("");

        //pie chart
        /*var total = [
            ['完成', 1],
            ['未完成', 3]
        ];*/
        var chart5 = jQuery.jqplot('chart5', [total], {
            title:'量化数据输入完成情况',
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: { showDataLabels: true }
            },
            legend: { show:true, location: 'e' }
        });
    }

    function initRightChat(profits, expenses, tickslabel){
        $("#chart3").html("");

//        var profits = [100,60, 59,93,46];
//        var expenses = [82,46, 51,93,1];
//        var tickslabel = ['月度', '双月', '季度', '半年','一年'];
        var ylabel = ['Profits','Expenses'];

        //bar chart
        var chart3 = $.jqplot('chart3', [profits,expenses], {
            title:"各周期量化数据完成情况",
            seriesDefaults: {
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },

            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: tickslabel
                },
                yaxis:{
                    tickOptions:{
                        formatString:'%.0f条'
                    }
                }
            }
        });

        $('#chart3').bind('jqplotDataHighlight',
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html(tickslabel[seriesIndex] + ' - ' + data[1]);
            }
        );
        $('#chart3').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {
                $('#info2').html(tickslabel[seriesIndex] + ' - ' + data[1]);
            }
        );
        $('#chart3').bind('jqplotDataUnhighlight',
            function (ev) {
                $('#info1').html('');
            }
        );
    }
</script>
<!-- jQplot SETUP END -->

<div class="grid_4" style=" margin-left:2%; width:46%">
    <div class="jqPlot" id="chart5" style="width:100%;height:220px;"></div>
</div>

<div class="grid_4" style="margin-left:2%; width:46%">
    <div class="jqPlot" id="chart3" style="width:100%;height:220px;"></div>
</div>

<div class="clear"></div>

<script type="text/javascript">
    $(function(){
    });

</script>
